<template>
  <div class="key-issues">
    <div
      class="k-thing sp-flex"
      v-for="(i, idx) in thingArr"
      @click="openDialog(i)"
    >
      <div>
        <img
          :src="
            require(`../../assets/images/zhongdian0${(idx % 4) + 1}@2x.png`)
          "
          alt=""
        />
        <span>{{ i.name }}</span>
      </div>
      <div>
        <span class="bold-blue">{{ i.count || '--'}}</span>
        个
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    thingArr: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    openDialog(i) {
      this.$emit("openDialog", i);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.key-issues {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .k-thing {
    padding: 3px 10px;
    height: 23%;
    margin-bottom: 0.5rem;
    background: rgba(59, 139, 255, 0.1);
    border: 1px solid rgba(59, 139, 255, 0.4);
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-right: 5px;
      vertical-align: middle;
      height: 2.5rem;
      width: 2.5rem;
      transform: translateY(-3px);
    }
  }
}
</style>
